<template>
  <div id="app">
    <div class="main">
      <div
          v-show="isDlAnimation"
          class="dl"
          :class="[
          'dl-box',
          !isWorkout ? 'bcg' : 'bcr',
          isDlAnimation ? 'animate-dl1' : '',
        ]"
          :style="{ transition: 'background-color 0.5s ease' }"
      >
        <!--        <div class="dl-text">{{ !isWorkout ? "锻炼" : "休息" }}</div>-->
        <!--        <div class="dl-time">-->
        <!--          {{ !isWorkout ? workoutTimeFormat : restTimeFormat }}-->
        <!--        </div>-->
      </div>
      <!--      isDlAnimation ? 'animate-dl' : '',-->
      <div
          class="dl"
          :class="[
          'dl-box',
          isWorkout ? 'bcg' : 'bcr',
          isDlAnimation ? 'animate-dl' : '',
        ]"
          :style="{ transition: 'background-color 0.5s ease' }"
      >
        <div class="dl-text">{{ isWorkout ? "锻炼" : "休息" }}</div>
        <div class="dl-time">
          {{ isWorkout ? workoutTimeFormat : restTimeFormat }}
        </div>
      </div>
      <div
          class="xx"
          :class="[
          'xx-box',
          isWorkout ? 'bcr' : 'bcg',
          isXxAnimation ? 'animate-xx' : '',
        ]"
          :style="{ transition: 'background-color 1s ease' }"
      >
        <div class="xx-text">{{ !isWorkout ? "锻炼" : "休息" }}</div>
        <div class="xx-time">
          {{ !isWorkout ? workoutTimeFormat : restTimeFormat }}
        </div>
      </div>
    </div>
    <div class="foonter">
      <div class="font-item">
        <div style="font-size: 10vw; color: #007aff; font-weight: 500">
          {{ zq }}
        </div>
        <div>剩余周期</div>
      </div>
      <div class="font-item">
        <div style="color: #91ff3f; font-size: 10vw">
          <div v-show="!isRunning" @click="startTimer">开始</div>
          <div v-show="isRunning" @click="ztTimer">暂停</div>
        </div>
      </div>
      <div class="font-item">
        <div style="font-size: 10vw; color: #fefe36; font-weight: 500">
          {{ cyclesLeft }}
        </div>
        <div>剩余循环</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      workoutTime: 3,
      restTime: 3,
      cyclesLeft: 3,
      zq: 4,
      isWorkout: true,
      isRunning: false,
      interval: null,
      isDlAnimation: false,
      isXxAnimation: false,
      setworkoutTime: 0,
      setrestTime: 0,
      setcyclesLeft: 0,
    };
  },
  created() {
    this.setworkoutTime = this.workoutTime;
    this.setrestTime = this.restTime;
    this.setcyclesLeft = this.cyclesLeft;
  },
  computed: {
    workoutTimeFormat() {
      let minutes = Math.floor(this.workoutTime / 60);
      let seconds = this.workoutTime % 60;
      return (
          (minutes < 10 ? "0" + minutes : minutes) +
          ":" +
          (seconds < 10 ? "0" + seconds : seconds)
      );
    },
    restTimeFormat() {
      let minutes = Math.floor(this.restTime / 60);
      let seconds = this.restTime % 60;
      return (
          (minutes < 10 ? "0" + minutes : minutes) +
          ":" +
          (seconds < 10 ? "0" + seconds : seconds)
      );
    },
  },
  methods: {
    updateTime() {
      if (this.isWorkout) {
        this.workoutTime--;
        if (this.workoutTime === 0) {
          this.isWorkout = false;
          this.isDlAnimation = true;
          this.isXxAnimation = true;
          setTimeout(() => {
            this.isDlAnimation = false;
            this.isXxAnimation = false;
          }, 1000);
          this.workoutTime = this.setworkoutTime;
        }
      } else {
        this.restTime--;
        if (this.restTime === 0) {
          this.isWorkout = true;
          this.isDlAnimation = true;
          this.isXxAnimation = true;
          setTimeout(() => {
            this.isDlAnimation = false;
            this.isXxAnimation = false;
          }, 1000);
          this.restTime = this.setrestTime;
          this.cyclesLeft--;
          if (this.cyclesLeft === 0) {
            this.zq--;
            if (this.zq === 0) {
              clearInterval(this.interval);
              this.isRunning = false;
            } else {
              this.cyclesLeft = this.setcyclesLeft;
            }
          }
        }
      }
    },
    startTimer() {
      uni.vibrateLong({
        success: function () {
          console.log('success1111111');
        }
      });
      if (this.zq === 0) return;
      this.isRunning = true;
      this.interval = setInterval(() => {
        this.updateTime();
      }, 1000);
    },
    ztTimer() {
      uni.vibrateLong({
        success: function () {
          console.log('success1111111');
        }
      });
      clearInterval(this.interval);
      this.isRunning = false;
    },
  },
};
</script>

<style scoped>
.main {
  height: calc(75vh - 88rpx);
}

.dl-box {
  width: 100%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.xx-box {
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.animate-dl {
  animation-name: loadingAnimationDl;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.animate-dl1 {
  animation-name: loadingAnimationDl1;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.animate-xx {
  animation-name: loadingAnimationXx;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.bcg {
  background-color: #91ff3f;
}

.bcr {
  background-color: red;
}

.dl-text {
  font-weight: 550;
  font-size: 20vw;
}

.dl-time {
  width: 100%;
  font-size: 30vw;
  font-weight: 550;
  display: flex;
  justify-content: center;
  align-items: center;
}

.xx-text {
  color: white;
  font-size: 10vw;
}

.xx-time {
  color: white;
  font-size: 15vw;
  font-weight: 550;
  display: flex;
  justify-content: center;
  align-items: center;
}

.foonter {
  z-index: 999;
  height: 25vh;
  background-color: #252225;
  color: white;
  display: flex;
}

.font-item {
  width: 33%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@keyframes loadingAnimationDl {
  from {
    height: 30%;
  }
  to {
    height: 70%;
  }
}

@keyframes loadingAnimationDl1 {
  from {
    height: 70%;
  }
  to {
    height: 0;
  }
}

@keyframes loadingAnimationXx {
  from {
    height: 0;
  }
  to {
    height: 30%;
  }
}
</style>
